<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用CDN方式引入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>
</head>
<body>
<h1>Vue的修饰符</h1>
<hr>

<div id="app">
    <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
  这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
  即阻止表单提交的默认行为 -->
    <form action="save" v-on:submit.prevent="onSubmit">
        <label for="username">
            <input type="text" id="username" v-model="user.username">
            <!--注意：这里点击的提交按钮,也并不执行save动作,而是执行了onSubmit方法。-->
            <button type="submit">保存</button>
        </label>
    </form>
</div>

<script>
    // 创建一个vue对象
    let vm = new Vue({
        el: '#app',//绑定vue作用的范围,el是element的简写。
        data: {//定义页面中显示的模型数据或者说为属性
            user: {}
        },
        methods:{
            onSubmit() {
                if (this.user.username) {
                    console.log('提交表单，用户名是：'+this.user.username)
                } else {
                    alert('请输入用户名')
                }
            }
        }
    })
</script>
</body>
</html>
